<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        canvas{
            border: 1px solid red;
        }
    </style>
</head>
<body>
     <canvas id="box" width="500" height="500">您的浏览器不支持画布</canvas>
<script type="text/javascript">
    //通过画布获取画笔
    var box=document.getElementById("box");
    var pen=box.getContext("2d");
    pen.clearRect(0,0,box.width,box.height);//清除画布

   //画一条直线（起始点，终点）
    pen.moveTo(100,30);
    pen.lineTo(200,30);
    pen.stroke();

    //画一个三角形
    //beginPath（）开启一段路径
    pen.beginPath();
    pen.moveTo(100,50);
    pen.lineTo(50,100);
    pen.lineTo(150,100);
    //关闭此路径
    pen.closePath();
    pen.stroke();

    //画一个矩形（rect（） fillRect（）  strockRect（））
    pen.beginPath();
    pen.rect(160,130,100,150);
    pen.closePath();
    pen.stroke();

    pen.beginPath();
    //fillRect----填充一个矩形，默认是黑色的，不用渲染
    //fillRect绘制矩形，设置边框样式的时候没有效果
    pen.fillStyle="red";//设置填充的样式
//    pen.fill();
    pen.strokeStyle="blue";//设置边框的样式
    pen.fillRect(100,300,100,150);
    pen.closePath();

    pen.beginPath();
    pen.fillStyle="yellow";
    pen.fill();
    //strokeRect-----绘制带有矩形边框的矩形，不用渲染，有默认的颜色，也是黑灰
    //strokeRect绘制的矩形，设置填充样式的时候没有效果
    pen.strokeRect(300,300,100,150);
    pen.closePath();

   //画圆
    pen.beginPath();
    pen.arc(400,100,50,0,Math.PI*2,true);
    pen.closePath();
    pen.stroke();

    //画一条曲线

    pen.beginPath();
    pen.moveTo(119,221);
    pen.quadraticCurveTo(111,37,372,102);
    pen.stroke();
    pen.closePath();








</script>
</body>
</html>